<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title
      title="全年申报户次分布"
      time="2"
      timePosition="left"
      dw="单位：户次"
    ></Title>
    <echartCompt
      class="echarts"
      style="height: 422px; margin: 0 auto"
      v-model="chartOption"
    ></echartCompt>
  </div>
</template>
  <script>
import Title from "@/components/title";
import * as echartOption from "@/components/echart-axis";

export default {
  name: "dygqywbll",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: { qnsbhcfbList: [] }, // 图表数据
    };
  },
  computed: {
    chartOption() {
      let _this = this;
      let barWidth = 24;
      var xdata = [];
      let data1 = [];
      let echartdata = this.EchartData.qnsbhcfbList;
      echartdata.map((item) => {
        xdata.push(item.yf);
        data1.push(item.hc);
      });
      const option = {
        tooltip: echartOption.tooltip(),
        grid: echartOption.echartGrid({
          right: 60,
        }),
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          boundaryGap: true,
        },
        yAxis: {
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
        },
        series: [
          {
            type: "bar",
            name: "户次",
            data: data1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [barWidth / 3, barWidth / 3, 0, 0],
                color: new _this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(2, 161, 249, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(41, 241, 156, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };

      return option;
    },
  },
  created() {
    let date = "";
    let year = new Date().getFullYear();
    date = year;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSbcxService/qnsbhcfbQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // this.initData();
    });
  },
  methods: {
    initData() {},
  },
};
</script>
  <style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 926px;
  height: 476px;
}
</style>
  